<template>
  <!-- 顶部导航条 -->
  <!-- 顶部导航条外部容器 -->
  <div class="topbar-wrapper">
    <!-- 创建内部容器 -->
    <div class="topbar w clearfix">
      <!-- 左侧的导航 -->
      <ul class="service">
        <li><router-link to="/portal">首页</router-link></li>
        <li class="line">|</li>
        <li><router-link to="/portal">手机商城</router-link></li>
      </ul>

      <!-- 购物车 -->
      <!-- <ul class="shop-cart shortcut">
        <li>
          <div class="s-dropdown s-dropdown-minicart" @mouseenter="getCart()">
            <div class="h h-wide">
              <router-link to="/shopCart" class="icon-minicart">
                <span
                  >购物车(<span>{{ carts.length }}</span
                  >)</span
                >
              </router-link>
            </div>
            <div class="b">
              <div class="dropdown-minicart">
                <div
                  class="minicart-pro-empty"
                  style="display: none"
                  v-show="carts.length == 0"
                >
                  <p><span class="icon-minicart"></span></p>
                  <p>您的购物车是空的，赶紧选购吧~</p>
                  <router-link to="/portal">去逛逛吧</router-link>
                </div>
                <div
                  class="minicart-pro-list hide minicart-pro-list-scroll"
                  style="display: block"
                  v-show="carts.length != 0"
                >
                  <ul>
                    <li
                      class="minicart-pro-item"
                      v-for="(item, index) in carts"
                      :key="index"
                    >
                      <div class="pro-info clearfix">
                        <div class="p-choose" @click="CheckedCart(index)">
                          <i
                            :class="{
                              icon_choose: isCartSelect[index],
                              icon_choose_normal: !isCartSelect[index],
                            }"
                          ></i>
                        </div>
                        <div class="p-img">
                          <router-link
                            :to="{
                              path: '/detail',
                              query: {
                                skuid: item.skuid,
                              },
                            }"
                          >
                            <img
                              :src="`https://img11.360buyimg.com/n7/${item.imgsrc[0]}`"
                            />
                          </router-link>
                        </div>
                        <div class="p-name">
                          <router-link
                            :to="{
                              path: '/detail',
                              query: {
                                skuid: item.skuid,
                              },
                            }"
                            >{{ item.jixing }}({{
                              item.color == "0" ? " " : item.color
                            }})
                            {{
                              item.version == "0" ? " " : item.version
                            }}</router-link
                          >
                        </div>
                        <div class="p-dec">
                          <span class="p-slogan"></span>
                        </div>
                        <div class="p-status">
                          <div class="p-price">
                            <b>¥&nbsp;{{ item.price }}.00</b
                            ><strong
                              ><em>x</em
                              ><span>{{ item.buynumber }}</span></strong
                            >
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="minicart-pro-settleup">
                    <p>
                      <span>总计：</span>
                      <span
                        ><b>¥&nbsp;{{ price }}.00</b><s></s
                      ></span>
                    </p>
                    <a class="button-minicart" @click="ConfirmCart()">结算</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul> -->

      <!-- 用户登录注册 -->
      <ul class="user-info">
        <li class="li-img">
          <img :src="userInfo.logoUrl" alt="" />
          <div class="v-popover">
            <div class="popover-content">
              <router-link
                to="/personalInfo"
                class="nickname-item"
                href="javascript:;"
                >{{ userInfo.username }}</router-link
              >
              <div class="links-item">
                <router-link to="/personalInfo" class="single-link-item">
                  <div class="link-title">
                    <i class="iconfont link-icon">&#xe651;</i>
                    <span>个人中心</span>
                  </div>
                  <i class="iconfont">&#xe662;</i>
                </router-link>
                <!-- <router-link to="/order" class="single-link-item">
                  <div class="link-title">
                    <i class="iconfont link-icon">&#xe653;</i>
                    <span>订单中心</span>
                  </div>
                  <i class="iconfont">&#xe662;</i>
                </router-link>
                <router-link to="/shopCart" class="single-link-item">
                  <div class="link-title">
                    <i class="iconfont link-icon">&#xe653;</i>
                    <span>购物车</span>
                  </div>
                  <i class="iconfont">&#xe662;</i>
                </router-link> -->
                <div class="split-line"></div>
                <router-link
                  to="/login"
                  @click.native="loginOut"
                  class="single-link-item"
                >
                  <div class="link-title">
                    <i class="iconfont link-icon">&#xe61c;</i>
                    <span>退出登陆</span>
                  </div>
                  <i class="iconfont">&#xe662;</i>
                </router-link>
              </div>
            </div>
          </div>
        </li>
        <li class="line">|</li>
        <!-- <li><a href="javascript:;">登录</a></li>
        <li class="line">|</li>
        <li><a href="javascript:;">注册</a></li> -->
        <!-- <li class="line">|</li> -->
        <!-- <li>
          <router-link to="/order" href="javascript:;">我的订单</router-link>
        </li> -->
        <li class="line">|</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      carts: [],
      isCartSelect: [],
      price: 0,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    loginOut() {
      this.$store.commit("delToken");
    },
    getCart() {
      this.axios
        .get("/cart/getCart", {
          params: {
            userid: this.$store.getters.UserInfoID,
          },
        })
        .then((res) => {
          this.price = 0;
          if (res.data.code == 200) {
            this.carts = res.data.carts;
            this.isCartSelect = new Array(this.carts.length).fill(true);
            this.carts.forEach((c) => {
              this.price += Math.imul(c.price, c.buynumber);
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //确认订单
    ConfirmCart() {
      let ordercart = [];
      for (let i = 0; i < this.isCartSelect.length; i++) {
        if (this.isCartSelect[i]) {
          ordercart.push(this.carts[i]);
        }
      }
      if (ordercart.length == 0) {
        this.noOrdercart = true;
      } else {
        this.$store.commit("setCarts", {
          cart: ordercart,
          price: this.price,
        });
        this.$router.push({
          path: "Confirmcart",
        });
      }
    },
    CheckedCart(index) {
      for (let i in this.carts) {
        if (i == index && this.isCartSelect[index] == true) {
          this.price -= Math.imul(this.carts[i].price, this.carts[i].buynumber);
        } else if (i == index && this.isCartSelect[index] == false) {
          this.price += Math.imul(this.carts[i].price, this.carts[i].buynumber);
        }
      }
      this.$set(this.isCartSelect, index, !this.isCartSelect[index]);
    },
  },
  mounted() {
    setTimeout(() => {
      this.getCart();
    }, 500);
  },
};
</script>

<style scoped>
@import "../assets/css/nav.css";
@import url("../assets/fa/css/all.css");
@import url("../assets/css/base.css");
@import url("../assets/css/shopcart.css");
</style>